<template>
  <!-- 积分记录弹窗 -->
  <section>
    <li ref="point-record-entrance"
        @click="setPonitRecordPanelVisible(true)">
      <span class="polyv-input-more-icon ponit-record-icon"
            data-status="false"></span>
      <span>积分</span>
    </li>
    <modal :visible="pointRecordPanelVisible"
           title="积分记录"
           @close="setPonitRecordPanelVisible(false)"
           class="mobile-point-record-modal">
      <MobilePointRERecord v-if="pointRecordPanelRender"
                           :red-envelope-sdk="redEnvelopeSdk"
                           unit="点" />
    </modal>
  </section>
</template>

<script>
import { RedEnvelope } from '@polyv/interactions-receive-sdk';
import MobilePointRERecord from '@polyv/interactions-receive-sdk-ui-default/lib/MobilePointRERecord';
import { RedEnvelopeMessageHub, RedEnvelopeMessageHubEvents } from './mixin';

export default {
  components: {
    MobilePointRERecord,
  },
  data() {
    return {
      // 红包 SDK 实例
      redEnvelopeSdk: null,
      pointRecordPanelVisible: false,
      pointRecordPanelRender: false,
    };
  },
  created() {
    this.redEnvelopeSdk = new RedEnvelope();
    RedEnvelopeMessageHub.on(
      RedEnvelopeMessageHubEvents.POINT_RECORD_SHOW,
      () => {
        this.setPonitRecordPanelVisible(true);
      }
    );
  },
  mounted() {
    this.customMountEl();
  },
  methods: {
    customMountEl() {
      const $morePanel = document.querySelector('.polyv-more-control-list');
      const $li = this.$refs['point-record-entrance'];
      $morePanel.appendChild($li);
    },
    setPonitRecordPanelVisible(visible) {
      this.pointRecordPanelVisible = visible;

      if (visible) {
        this.pointRecordPanelRender = true;
      } else {
        setTimeout(() => {
          this.pointRecordPanelRender = false;
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss">
.ponit-record-icon {
  background-image: url();
}
</style>
